<!--
 * @Author: lixiangqun
 * @Date: 2025-10-29 22:47:01
 * @LastEditors: lixiangqun
 * @LastEditTime: 2025-11-15 15:44:15
 * @Description: 会话内容
 * @FilePath: \electrconVue\src\components\MessageList.vue
-->
<template>
  <div class="message-list" ref="_ref">
    <div
      class="message-item mb-3"
      v-for="message in messages"
      :key="message.id"
    >
      <div class="flex" :class="{ 'justify-end': message.type === 'question' }">
        <div class="">
          <div
            class="flex text-gray-500"
            :class="{ 'justify-end': message.type === 'question' }"
          >
            {{ message.createdAt }}
          </div>
          <div
            class="message-question bg-green-700 text-white p-2 rounded-md"
            v-if="message.type === 'question'"
          >
            <img
              :src="`safe-file://${message.imagePath}`"
              v-if="message.imagePath"
              class="w-24"
              alt="preview"
            />
            {{ message.content }}
          </div>
          <div
            v-else
            class="messsage-question bg-gray-200 text-gray-700 p-2 rounded-md"
          >
            <template v-if="message.status === 'loading'">加载中</template>
            <div
              class="prose prose-headings:my-2 prose-ol:my-1 prose-ul:my-1 prose-li:my-0 prose-p:my-1 prose-pre:my-0"
              v-else
            >
              <vue-markdown :source="message.content" :plugins="plugins" />
              <!-- {{ message.content }} -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import VueMarkdown from "vue-markdown-render";
import { ref } from "vue";
import { MessageProps } from "src/types";
import markdownItHighlightJs from "markdown-it-highlightjs";
const plugins = [markdownItHighlightJs];
defineProps<{ messages: MessageProps[] }>();
const _ref = ref<HTMLDivElement>();

defineExpose({
  ref: _ref,
});
</script>
